<template>
  <div class="waiting-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="展示行数">
        <el-input-number
            :min="optionsInfo?.minRow"
            :max="optionsInfo?.maxRow || 5"
            v-model="optionsInfo.showRowNums"
            class="hide-spin-button"
            size="small"
            @change="handleTotal"
        />
      </el-form-item>

      <el-form-item label="展示列数">
        <el-input-number
            :min="optionsInfo?.minShowColNums"
            :max="optionsInfo?.maxShowColNums || 6"
            v-model="optionsInfo.showColNums"
        />
      </el-form-item>

      <el-form-item label="内容高度">
        <el-input-number
            v-model="optionsInfo.contentHeight"
            :min="0"
            size="small"
            class="hide-spin-button"
        />
      </el-form-item>

      <el-form-item label="内边距顶部">
        <el-input-number
            v-model="optionsInfo.padding.top"
            :min="0"
            size="small"
            class="hide-spin-button"
        />
      </el-form-item>
      <el-form-item label="内边距底部">
        <el-input-number
            v-model="optionsInfo.padding.bottom"
            :min="0"
            size="small"
            class="hide-spin-button"
        />
      </el-form-item>

      <template v-if="false">
        <el-form-item label="队列子元素内边距左侧" class="column-info">
          <el-input-number
              v-model="optionsInfo.queuePadding.left"
              :min="0"
              size="small"
              class="hide-spin-button"
          />
        </el-form-item>
        <el-form-item label="队列子元素内边距右侧" class="column-info">
          <el-input-number
              v-model="optionsInfo.queuePadding.right"
              :min="0"
              size="small"
              class="hide-spin-button"
          />
        </el-form-item>
      </template>


      <el-form-item label="队列子元素内边距右侧" class="column-info">
        <el-input-number
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.queuePadding.value"
        />
      </el-form-item>


    </div>
    <div class="list-title-setting">
      <div class="title-info">
        <el-divider content-position="left">列表名设置</el-divider>
      </div>

      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.queueNameBackgroundColor"/>
      </el-form-item>

      <el-form-item label="队列名字号">
        <el-input-number
            size="small"
            v-model="optionsInfo.queueNameFontSize"
        />
      </el-form-item>

      <el-form-item label="队列名字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.queueNameFontColor"/>
      </el-form-item>

      <el-form-item label="队列名粗细">
        <el-select v-model="optionsInfo['queueNameFontWeight']" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="切屏时间(s)">
        <el-input-number
            :min="10"
            :step="1"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.switchTime"
            :disabled="!(optionsInfo.switchScreen)"
        />
      </el-form-item>
    </div>

    <div class="list-scroll-setting">
      <div class="title-info">
        <el-divider content-position="left">列表设置</el-divider>
      </div>

      <QueueRoomOptions
          label="队列名称"
          :designer="designer"
          :options="queueRoomOptions"
          :option-model="optionModel"
          :selected-widget="selectedWidget"
          optionKey="queueName"
      />

      <!--科室Key-->
      <template v-if="optionsInfo.queueName==='deptName'">
        <deptNameKeyEditor
            :designer="designer"
            :option-model="optionModel"
            :selected-widget="selectedWidget"
        />
      </template>

      <!--诊室Key-->
      <template v-if="optionsInfo.queueName==='roomName'">
        <RoomNameKeyEditor
            businessType="special"
            :designer="designer"
            :selected-widget="selectedWidget"
            :option-model="optionModel"
        />
      </template>

      <!--号别Key-->
      <template v-if="optionsInfo.queueName==='registerName'">
        <el-form-item label="队列类型" class="column-info">
          <el-select v-model="optionsInfo['registerNameKey']" placeholder="请选择">
            <el-option
                v-for="item in registerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </template>

      <template v-if="false">
        <el-form-item label="开启滚动">
          <el-switch v-model="optionsInfo.openScroll"/>
        </el-form-item>
        <el-form-item label="滚动速度">
          <el-input-number
              v-model="optionsInfo.scrollStep"
              :min="0"
              :max="4"
              :disabled="!(optionsInfo.openScroll)"
              size="small"
              class="hide-spin-button"
          />
        </el-form-item>
        <el-form-item label="是否切屏">
          <el-switch v-model="optionsInfo.switchScreen"/>
        </el-form-item>
        <el-form-item label="切屏时间(s)">
          <el-input-number
              :min="10"
              :step="1"
              v-model="optionsInfo.switchTime"
              :disabled="!(optionsInfo.switchScreen)"
              size="small"
              class="hide-spin-button"
          />
        </el-form-item>
      </template>
    </div>

    <!--等待就诊滚动设置-->
    <div class="wait-visit-setting">
      <div class="title-info">
        <el-divider content-position="left">等待就诊</el-divider>
      </div>
      <el-form-item label="候诊患者类型" class="column-info">
        <el-radio-group v-model="optionsInfo['waitPatientType']">
          <el-radio :label="item.value" v-for="item in waitPatientOPtions" :key="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="就诊患者是否显示" class="column-info">
        <el-switch v-model="optionsInfo['showCurrentPatient']" :active-value="2" :inactive-value="1"/>
      </el-form-item>

      <el-form-item label="患者号标识颜色" class="column-info">
        <el-switch v-model="optionsInfo.orderTag"/>
        <el-tooltip class="item" effect="dark" content="颜色需要在规则中配置，如果规则中无此配置，即使打开该配置依旧无效"
                    placement="bottom">
          <el-button>
            <i class="el-icon-warning"></i>
          </el-button>
        </el-tooltip>
      </el-form-item>

      <el-form-item label="是否包含挂起患者" class="column-info">
        <el-switch v-model="optionsInfo['containHangupData']" :active-value="true" :inactive-value="false"/>
      </el-form-item>

      <!-- <el-form-item label="挂起患者背景色" class="column-info">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.containHangupDataBackgroundColor"/>
      </el-form-item> -->

      <el-form-item label="患者字号">
        <el-input-number
            size="small"
            v-model="optionsInfo.patientFontSize"
        />
      </el-form-item>

      <el-form-item label="患者粗细">
        <el-select v-model="optionsInfo['patientFontWeight']" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="患者分割线">
        <el-switch v-model="optionsInfo['patientDivider']"/>
      </el-form-item>


      <!--      {{ 'showRoomName' }}-->
      <!--      {{ optionsInfo['showRoomName'] }}-->
      <el-form-item label="患者诊室是否显示" class="column-info">
        <el-switch v-model="optionsInfo['showRoomName']" :active-value="2" :inactive-value="1"/>
      </el-form-item>

      <!--诊室字段key-->
      <el-form-item label="患者诊室类型" v-if="fieldHas('patientRoomNameKey')" class="column-info">
        <el-select v-model="optionsInfo['patientRoomNameKey']" placeholder="请选择"
                   :disabled="optionsInfo['showRoomName']===1">
          <el-option
              v-for="item in roomOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="患者诊室位置" v-if="fieldHas('roomNamePosition')" class="column-info">
        <el-select v-model="optionsInfo['roomNamePosition']" placeholder="请选择"
                   :disabled="optionsInfo['showRoomName']===1">
          <el-option
              v-for="item in positionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="开启滚动">
        <el-switch v-model="optionsInfo.openScroll"/>
      </el-form-item>

      <el-form-item label="视图首屏数量" class="column-info">
        <el-input-number
            size="small"
            :min="optionsInfo.viewMinNumber || 4"
            :max="optionsInfo.viewManNumber || 4"
            v-model="optionsInfo.viewNumber"
        />
      </el-form-item>

      <el-form-item label="开启滚动数量" class="column-info">
        <el-input-number
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.waitingNumber"
        />
        <el-tooltip class="item" effect="dark" placement="bottom">
          <div class="scroll-describe-info" slot="content">
            <dl class="condition">
              <dt>该属性生效的条件:</dt>
              <dd>1、患者总量≥(展示列数×视图首屏数量总和)</dd>
              <dd>2、滚动开关开启</dd>
            </dl>
            <div class="annotations" v-html="`若需要该属性生效:该设置参数<患者总量`"/>
            </div>
          <el-button>
            <i class="el-icon-warning"/>
          </el-button>
        </el-tooltip>
      </el-form-item>

      <el-form-item label="滚动速度" class="column-info">
        <el-input-number
            :min="1"
            :max="5"
            size="small"
            class="hide-spin-button"
            :disabled="!(optionsInfo.openScroll)"
            v-model="optionsInfo.waitingVisitStep"
        />
      </el-form-item>
    </div>
  </div>
</template>

<script>
import Draggable from "vuedraggable"
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import RoomNameKeyEditor from "@detailsEdit/scene-edit/basicInfo/roomNameKey-editor.vue";
import DeptNameKeyEditor from "@detailsEdit/scene-edit/basicInfo/deptNameKey-editor.vue";
import QueueRoomOptions from "../basicInfo/queueRoomOptions-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";
import {queueRoomOptions, registerOptions, roomOptions2} from "@c/public/form-designer/devType/datas-types";

export default {
  name: "sceneWaitiRowConfig2-editor",

  componentName: "sceneWaitiRowConfig2-editor",

  components: {
    Draggable,
    RoomNameKeyEditor,
    DeptNameKeyEditor,
    QueueRoomOptions,
  },

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      constantDic: constantDic,
      optionsInfo: Object(),
      predefineColors: types['predefineColors'],
      queueRoomOptions: types['queueRoomOptions'],
      registerOptions: types['registerOptions'],
      roomOptions2: types['roomOptions2'],
      fontWeightOptions: types['fontWeightOptions'],
      positionOptions: [
        {
          value: 'left',
          label: '左侧'
        },
        {
          value: 'right',
          label: '右侧'
        },
      ],
      waitPatientOPtions: [
        {
          value: 1,
          label: '候诊等待'
        },
        {
          value: 2,
          label: '候诊列表'
        },
      ]
    }
  },

  computed: {
    fieldHas() {
      return function (field) {
        return Reflect.has(this.optionsInfo, field)
      }
    },
    isDisabled() {
      return function (val) {
        let arr = ['deptName', 'treatmentRoomName', 'workerName'];
        return arr.includes(val);
      }
    }
  },

  methods: {
    handleDragEnd() {

    },

    handleTotal(val) {
      let {multiple} = (this.optionsInfo);
      switch (val) {
        case 1:
          Reflect.set((this.optionsInfo), 'showColNums', 6)
          break
        case 2:
          Reflect.set((this.optionsInfo), 'showColNums', 3)
          break
        case 3:
          Reflect.set((this.optionsInfo), 'showColNums', 2)
          break
        case 4:
        case 5:
        case 6:
        case 7:
          Reflect.set((this.optionsInfo), 'showColNums', 1)
          break
      }
      console.log((multiple * val))
      Reflect.set((this.optionsInfo), 'total', (multiple * val));
    }
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        let key = (val.config)
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true
    }
  }

}
</script>

<style lang="scss" scoped>
.col-info {
  :deep(.el-form-item__content) {
    margin-left: 1px !important;

    .title {
      width: 100%;
    }

    .el-checkbox__label {
      width: 100%;
    }

    .el-checkbox {
      width: calc(100% - 32px);
    }
  }
}

.column-info {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    padding-bottom: 6px;
  }

  :deep(.el-form-item__content) {
    width: 100% !important;
    margin-left: 0 !important;

    .el-button {
      color: #e58602;
      font-size: 18px;
      flex-shrink: 0;
      padding: 0 15px;
      border-color: transparent !important;
      background: transparent !important;
    }

    .el-select {
      width: 100% !important;
    }

    .el-radio-group {
      display: flex;
      flex-direction: column;

      .el-radio {
        height: 30px;
        display: flex;
        align-items: center;
        align-content: center;
      }
    }
  }
}

</style>
